<template>
  <div class="big">
       <div class="menutop" >
      </div>
      <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1">
        <el-icon><UserFilled /></el-icon>
        <span @click="pageChange('/admin/userlist')">客户信息列表</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><Stamp /></el-icon>
        <span @click="pageChange('/admin/userprocess')">客户审核列表</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item v-if="username==='super'" index="3">
        <el-icon><Avatar /></el-icon>
        <span @click="pageChange('/admin/adminlist')">管理员信息列表</span>
        <el-icon><ArrowRight /></el-icon>    
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><Avatar /></el-icon>
        <span @click="pageChange('/admin/stafflist')">员工信息列表</span>
        <el-icon><ArrowRight /></el-icon>    
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon><Stamp /></el-icon>
        <span @click="pageChange('/admin/staffprocess')">员工审核列表</span>
        <el-icon><ArrowRight /></el-icon>    
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon><House /></el-icon>
        <span @click="pageChange('/admin/meetingroomlist')">会议室信息列表</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
      <el-menu-item index="8">
       <el-icon><List /></el-icon>
        <span @click="pageChange('/admin/bookingorderlist')">预定订单列表</span>
        <el-icon><ArrowRight /></el-icon>
      </el-menu-item>
    </el-menu>
  </div>
  
</template>
<script >
import {ArrowRight,UserFilled,Avatar,House,List,Stamp } from '@element-plus/icons-vue';

export default {
  name:"AdminLeftMenu",
  props: {
    username:{
      type:String,
      default:null,
    }
  },
  components: {
      ArrowRight,
      UserFilled,
      Avatar,
      House,
      List,
      Stamp,
  },
  computed: {
    displayUsername() {
      return localStorage.getItem('username') || this.username;
    },
  },
  methods: {
    pageChange(url) {
      this.$router.push(url);
    },
  },
  created() {
    // 存储初始的 username 到本地存储
    if (this.username) {
      localStorage.setItem('username', this.username);
    }
  },
  mounted() {
    // 监听路由变化，更新本地存储中的用户名
    this.$router.afterEach(() => {
      const currentUsername = localStorage.getItem('username');
      if (currentUsername) {
        this.$emit('update:username', currentUsername);
      }
    });
  },
}
</script>
<style>
.big {
  height: 925px;
  background-color: #545c64
}
.menutop {
  height: 50px;
  padding-top: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  color: #fff;
}

</style>